<template>
    <view class="custom">
        <view class="search-container">
            <view class="input-wrapper">
                <image class="search-icon" src="/static/search-icon.png" />
                <input class="search-input" type="text" placeholder="请输入客户名称" />
            </view>
            <view class="add-button">+</view>
        </view>
        <scroll-view scroll-x class="scroll-row" :scroll-left="scrollLeft">
        <view class="scroll-row-item" v-for="(item, index) in tabs" :key="index" @tap="selectTab(index)"
            :class="{ active: currentTab === index }"
        >
            <text :class="['tab-text', { 'text-active': currentTab === index }]">{{ item }}</text>
        </view>
        </scroll-view>
        <Card />
    </view>
  </template>
  
  

  <script setup lang="ts">
  import Card from './component/card.vue'
    import {ref} from 'vue'
    const currentTab = ref(0)
    const tabs = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6'])
    const selectTab = (index: number) => {
        currentTab.value = index
    }   
    const scrollLeft = ref(0)
    const handleChange = (index: number) => {
        currentTab.value = index
        scrollLeft.value = index * 60
    }
</script>
  
  <style lang="scss" scoped>
  .custom {
    // padding: 10px;
    background: #F5F5F5;
    height: 100vh;
  }
  .scroll-row {
    white-space: nowrap;
    width: 100%;
  }
  .scroll-row-item {
    display: inline-flex; // 改为 inline-flex
    align-items: center; // 添加垂直居中
    justify-content: center; // 添加水平居中
    padding: 10px 20px;
  }
  
  .tab-text {
    font-size: 14px;
    color: #333;
  }
  .active {
    border-radius: 66px;
    background: #2B6BFF;
  }
  .text-active {
    color: #fff;
    font-weight: bold;
  }
  
  .search-container {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  
  .input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 5px 10px;
  }
  
  .search-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  
  .search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
  }
  
  .add-button {
    width: 30px;
    height: 30px;
    // background-color: #2B6BFF;
    color: #323232;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-left: 10px;
  }
  </style>